<template>
  <div>
    <heads class="haeder">
      <i @click="back1()"></i>
        <span>待收货</span>
        <em class="one">编辑</em>
    </heads>
    <mains>
        <ords></ords>
        <div class="Defary1">
            <div class="Df-top wp bot">
                <div>订单编号{{data}}</div>
                <div>待收货</div>
            </div>
            <div class="Df-center wp bot">
                <div class="Dfc">
                    <div class="dfCheck">
                        <span :class="{'dfc-yes':bol}"></span>
                    </div>
                    <div>
                      <img src="../../../assets/user/g-san.png" alt="图片">
                    </div>
                </div>
                <div class="Dfc-cont">
                    <div>会呼吸丝滑蜜粉</div>
                    <div>规格：蜜粉</div>
                    <div class="Dfc-cont1">
                        <span>￥166.06</span>
                        <span>X1件</span>
                    </div>
                </div>

            </div>
            <div class="Df-bottom wp bot">
                <div>实付：<span>￥166.06</span></div>
                <div>
                    <p class="df-btn1">确认收货</p>
                </div>
            </div>
        </div>

    </mains>
    <!-- <div class="wAll">
        <div><i :class="{'dfc-yes':bol}"></i>全选</div>
        <div> <i>删除</i> </div>
    </div> -->
  </div>
</template>

<script>
import Head from '../Head';
import Main from '../Main';
import Ord from '../components/Ord';
export default {
    name:'WiaitReceive',
    data(){
        return {
            bol:false,
            bol1:false,
            data:'1485269676465',
            dtimer:'03:02:56'

        }
    },
    components:{
      'heads':Head,
      'mains':Main,
      'ords':Ord,

    },
    mounted(){
        // 倒计时
      function getRTime() {
        var now1=new Date('2021-1-7 16:00:00');
        var now2=new Date('2021-1-7 20:00:00');
        var tt1=(now2.getTime()-now1.getTime())/1000;
        var h1=Math.floor((tt1/ 60 / 60) % 24);
        var f1=Math.floor((tt1/60)%60);
        var s1=Math.floor(tt1%60);
        s1=59;
        var str = `0${h1}时${f1}分${s1}秒`;
        console.log(str);
        
        }
        // getRTime();
        // setInterval(getRTime, 1000);
    },
    methods:{
        back1(){
            this.$router.replace('/login');
        },
        // 倒计时

    }

}
</script>

<style scoped>
.header{
  position: relative;
}
.one{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}
/* ========= 全选*/
.wAll{
    width: calc(100% - 4rem);
    padding: 0 2rem;
    height: 9.5rem;
    font-size: 3rem;
    position: fixed;
    bottom: 0;
    border-top: #ccc 0.1rem solid ;
    background-color: #fff;
    display: flex;
}
.wAll div{
    flex: 1;
}
.wAll div:nth-child(1){
    line-height: 9.5rem;
    text-align: left;
    position: relative;
}
.wAll div:nth-child(1) i{
    position: relative;
    top: 0.4rem;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-no.png) no-repeat 0 0;
    margin-right: 2rem;

}
.wAll div:nth-child(1) i.dfc-yes{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-yes.png) no-repeat 0 0;
    margin-right: 2rem;
}
.wAll div:nth-child(2){
    text-align: right;
}
.wAll div:nth-child(2) i{
    display: inline-block;
    background-color: #e43e42;
    height: 4rem;
    color: #fff;
    width: 12rem;
    border-radius: 4rem;
    line-height: 4rem;
    text-align: center;
    position: relative;
    top: calc(50% - 2rem);
}
/* ========= */
.Defary1{
    width: 100%;
    height: 6rem;
    line-height: 6rem;
    border-bottom: 0.1rem solid #cccccc;
}
.Defary1 .Df-top{
    padding: 0 2rem;
    background-color: #fff;
    display: flex;
}
.Df-top div{
    flex: 1;
}
.Df-top div:nth-child(1){
    font-size: 2.8rem;
    text-align: left;
    clear: #4c4c4c;
}
.Df-top div:nth-child(2){
    text-align: right;
    color: #e53e42;
    font-size: 2.4rem;
}
.Df-center{
    height: 20rem;
    background-color: #fff;
    display: flex;
}
.Dfc-cont{
    display: flex;
    flex-direction: column;
    text-align: left;
}
.Dfc-cont div:nth-child(1){
    color: #4c4c4c;
    font-size: 2.8rem;
    line-height: 4rem;
    padding: 2.2rem 0 1rem ;
}

.Dfc-cont div:nth-child(2){
    color: #666;
    font-size: 2.4rem;
    line-height: 3.6rem;
    padding-bottom: 3rem;
}
.Dfc-cont1 span {
    line-height: 4rem;
}
.Dfc-cont1 span:nth-child(1){
    color: #e53e42;
    font-size: 2.4rem;
    margin-right: 3rem;
}
.Dfc-cont1 span:nth-child(2){
    color: #808080;
    font-size: 2.8rem;
}

.Dfc{
    height: 20rem;
    width: 20rem;
    line-height: 20rem;
    /* background-color: #f0f; */
    overflow: hidden;
    display: flex;
}
/* .Dfc div:nth-child(1){
    width: 4rem;
    height: 20rem;
}
.Dfc div:nth-child(1) span{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-no.png) no-repeat 0 0;
}
.Dfc div:nth-child(1) span.dfc-yes{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-yes.png) no-repeat 0 0;
} */
.Dfc div:nth-child(2){
    height: 15rem;
    line-height: 15rem;
    margin:2.5rem auto;
    width: 15rem;
    background-color: #fff;
}
.Dfc img{
    margin: 2.4rem;
}

.Df-bottom{
    height: 8.8rem;
    background-color: #fff;
    display: flex;
}
.Df-bottom div{
    flex: 1;
}
.Df-bottom div:nth-child(1){
    font-size: 2.8rem;
    color: #4c4c4c;
    text-align: left;
    line-height: 8.8rem;
}
.Df-bottom div:nth-child(1) span{
    color: #e53e42;
}
.Df-bottom div:nth-child(2){
    text-align: right;
    display: flex;
    position: relative;
}
.Df-bottom div:nth-child(2) .df-timer1{
    font-size: 2.4rem;
    color: #e53e42;
    height: 8.8rem;
    line-height: 8.8rem;
    position: relative;
    right: -3rem;
}
.Df-bottom div:nth-child(2) p.df-btn1{
    position: absolute;
    right: 0;
    background-color: #e53e42;
    color: #fff;
    font-size: 2.4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    width: 12rem;
    border-radius: 4rem;
    margin-top: 2.4rem;
   
}
/* margin */
.bot{
    border-bottom: 0.1rem solid #cccccc;
}
.wp{
    width: calc(100% - 4rem);
    padding: 0 2rem;
}
.wm{
    width: calc(100% - 4rem);
    margin: 0 2rem;
}
</style>